<template name="accountSecurity">
	<section class="preferences-page preferences-page--new page-settings">
		{{> header sectionName="Security" fullpage=true}}
		<div class="preferences-page__content">
			<form id="security" autocomplete="off" class="container">
				{{# if isAllowed}}
					<div class="section">
						<h1>{{_ "Two-factor_authentication"}}</h1>
						<div class="section-content border-component-color">
							{{#if isEnabled}}
								<button class="rc-button rc-button--cancel disable-2fa">{{_ "Disable_two-factor_authentication"}}</button>
							{{else}}
								{{#unless isRegistering}}
									<p>{{_ "Two-factor_authentication_is_currently_disabled"}}</p>

									<button class="rc-button rc-button--primary enable-2fa">{{_ "Enable_two-factor_authentication"}}</button>
								{{else}}
									<p>{{_ "Scan_QR_code"}}</p>
									<p>{{_ "Scan_QR_code_alternative_s" code=imageSecret}}</p>

									<img src="{{imageData}}">

									<form>
										<div class="input-line double-col">
											<input type="text" class="rc-input__element" id="testCode" placeholder="{{_ "Enter_authentication_code"}}">
											<button class="rc-button rc-button--primary setting-action verify-code">{{_ "Verify"}}</button>
										</div>
									</form>
								{{/unless}}
							{{/if}}
						</div>
					</div>

					{{#if isEnabled}}
						<div class="section">
							<h1>{{_ "Backup_codes"}}</h1>
							<div class="section-content border-component-color">
								<p>{{codesRemaining}}</p>
								<button class="rc-button rc-button--secondary regenerate-codes">{{_ "Regenerate_codes"}}</button>
							</div>
						</div>
					{{/if}}

					<div class="section">
						<h1>{{_ "Two-factor_authentication_email"}}</h1>
						<div class="section-content border-component-color">
							{{#if isEmailEnabled}}
								<button class="rc-button rc-button--cancel disable-2fa-email">{{_ "Disable_two-factor_authentication_email"}}</button>
							{{else}}
								<p>{{_ "Two-factor_authentication_email_is_currently_disabled"}}</p>

								<button class="rc-button rc-button--primary enable-2fa-email">{{_ "Enable_two-factor_authentication_email"}}</button>
							{{/if}}
						</div>
					</div>

				{{/if}}
			</form>
		</div>
	</section>
</template>
